<template>
    <div class="drag-table-box">
        <a-row class="col-title-box flex-ac">
            <a-col :span="col.spanWidth ||  avgSpan" class="col-title flex-ac " v-for="(col,index) in columns" :key="index">
                {{ col.label }}
            </a-col>
        </a-row>

        <div class="table-box">
            <table-row @clickRow="clickRow" v-if="source && source.length" :childArrKey="childArrKey" :level="1" :unfold="unfold" :columns="columns" :source="source">
                <span
                    v-for="(col,i) in columns"
                    v-if="col.slotName"
                    :slot="col.slotName"
                    slot-scope="{index,item}">
                    <slot :name="col.slotName" :index="index" :item="item"></slot>
                </span>
            </table-row>
        </div>
    </div>
</template>

<script>
import tableRow from "./table-row";

export default {
    name: "dragTable",
    props: {
        columns: {
            // 每列展示的数据,如果需要slot的方法渲染内容,可在元素对象内,添加slotName的属性,指定slot的name,数据是item,下标是index,spanWidth的字段,等同于Ant的栅格,不传的话,会自动平分
            type: Array,
            defalut() {
                return []
            },
        },
        source: {
            // 展示的数据
            type: Array,
            default() {
                return [];
            },
        },
        unfold:{
            // 默认展开的节点ID数组
            type:Array,
            default(){
                return []
            },
        },
        childArrKey:{
            // 子级数组的key值,
            type:String,
            default:'subRooms'
        },
    },
    beforeMount() {
        this.avgSpan = 24 / this.columns.length
    },
    data() {
        return {
            avgSpan: 0,
        }
    },
    methods:{
        clickRow(data){
            this.$emit('clickRow',data)
        },
    },
    components: {
        tableRow
    }
}
</script>

<style scoped lang="less">
.col-title-box {
    height: 48px;
    background: #F0F2F5;
    border: 1px solid #E4E7ED;

    .col-title {
        height: 48px;
        line-height: 48px;
        font-weight: 500;
        color: #1A1A1C;
        font-size: 16px;
        padding-left: 24px;
        //text-align: center;
    }
}

.table-box {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.drag-table-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

</style>